<template>
  <view class="pwd-container">
    <!-- 页面标题 -->
    <view class="page-header">
      <view class="header-title">修改密码</view>
      <view class="header-subtitle">定期修改密码，保障账户安全</view>
    </view>

    <!-- 密码强度提示 -->
    <view class="password-tips">
      <view class="tip-item">
        <view class="iconfont icon-info"></view>
        <text>密码长度6-20位，包含字母和数字</text>
      </view>
    </view>

    <!-- 表单区域 -->
    <view class="form-section">
      <uni-forms ref="form" :value="user" :rules="rules" labelWidth="160rpx">
        <view class="form-card">
          <uni-forms-item name="oldPassword" label="旧密码">
            <uni-easyinput 
              type="password" 
              v-model="user.oldPassword" 
              placeholder="请输入当前密码"
              :inputBorder="false"
              prefixIcon="locked"
            />
          </uni-forms-item>
          
          <uni-forms-item name="newPassword" label="新密码">
            <uni-easyinput 
              type="password" 
              v-model="user.newPassword" 
              placeholder="请输入新密码"
              :inputBorder="false"
              prefixIcon="locked"
            />
            <view class="password-strength" v-if="user.newPassword">
              <view class="strength-bar">
                <view 
                  class="strength-fill" 
                  :class="getPasswordStrength.class"
                  :style="{ width: getPasswordStrength.width }"
                ></view>
              </view>
              <text class="strength-text">{{ getPasswordStrength.text }}</text>
            </view>
          </uni-forms-item>
          
          <uni-forms-item name="confirmPassword" label="确认密码">
            <uni-easyinput 
              type="password" 
              v-model="user.confirmPassword" 
              placeholder="请再次输入新密码"
              :inputBorder="false"
              prefixIcon="locked"
            />
          </uni-forms-item>
        </view>
      </uni-forms>
    </view>

    <!-- 操作按钮 -->
    <view class="action-section">
      <button 
        class="submit-btn" 
        type="primary" 
        @click="submit"
        :disabled="loading"
      >
        <view v-if="!loading" class="btn-content">
          <view class="iconfont icon-check"></view>
          <text>确认修改</text>
        </view>
        <view v-else class="loading-content">
          <view class="loading"></view>
          <text>修改中...</text>
        </view>
      </button>
      
      <button class="cancel-btn" @click="goBack">取消</button>
    </view>
  </view>
</template>

<script>
  import { updateUserPwd } from "@/api/system/user"

  export default {
    data() {
      return {
        user: {
          oldPassword: '',
          newPassword: '',
          confirmPassword: ''
        },
        loading: false,
        rules: {
          oldPassword: {
            rules: [{
              required: true,
              errorMessage: '请输入当前密码'
            }]
          },
          newPassword: {
            rules: [{
                required: true,
                errorMessage: '请输入新密码',
              },
              {
                minLength: 6,
                maxLength: 20,
                errorMessage: '密码长度应为6-20位'
              },
              {
                pattern: /^(?=.*[a-zA-Z])(?=.*\d)[a-zA-Z\d]{6,20}$/,
                errorMessage: '密码必须包含字母和数字'
              }
            ]
          },
          confirmPassword: {
            rules: [{
                required: true,
                errorMessage: '请确认新密码'
              }, {
                validateFunction: (rule, value, data) => data.newPassword === value,
                errorMessage: '两次输入的密码不一致'
              }
            ]
          }
        }
      }
    },
    computed: {
      getPasswordStrength() {
        const password = this.user.newPassword
        if (!password) return { text: '', width: '0%', class: '' }
        
        let strength = 0
        
        // 长度检查
        if (password.length >= 8) strength += 25
        else if (password.length >= 6) strength += 15
        
        // 复杂度检查
        if (/[a-z]/.test(password)) strength += 25
        if (/[A-Z]/.test(password)) strength += 25
        if (/\d/.test(password)) strength += 25
        
        if (strength < 30) {
          return { text: '弱', width: '33%', class: 'weak' }
        } else if (strength < 60) {
          return { text: '中', width: '66%', class: 'medium' }
        } else {
          return { text: '强', width: '100%', class: 'strong' }
        }
      }
    },
    onReady() {
      this.$refs.form.setRules(this.rules)
    },
    methods: {
      submit() {
        this.$refs.form.validate().then(res => {
          this.loading = true
          
          updateUserPwd(this.user.oldPassword, this.user.newPassword)
            .then(response => {
              this.$modal.msgSuccess("密码修改成功")
              setTimeout(() => {
                this.goBack()
              }, 1500)
            })
            .catch(() => {
              this.loading = false
            })
        }).catch(() => {
          // 验证失败
        })
      },
      goBack() {
        uni.navigateBack()
      }
    }
  }
</script>

<style lang="scss" scoped>
  page {
    background: linear-gradient(135deg, #f5f6f7 0%, #e8eaf6 100%);
  }

  .pwd-container {
    min-height: 100vh;
    padding: 40rpx 30rpx;
  }

  /* 页面标题 */
  .page-header {
    text-align: center;
    margin-bottom: 60rpx;
    
    .header-title {
      font-size: 48rpx;
      font-weight: 600;
      color: #333;
      margin-bottom: 16rpx;
    }
    
    .header-subtitle {
      font-size: 28rpx;
      color: #999;
    }
  }

  /* 密码提示 */
  .password-tips {
    margin-bottom: 40rpx;
    
    .tip-item {
      display: flex;
      align-items: center;
      background: rgba(255, 193, 7, 0.1);
      border: 1rpx solid rgba(255, 193, 7, 0.3);
      border-radius: 20rpx;
      padding: 20rpx 30rpx;
      
      .iconfont {
        font-size: 32rpx;
        color: #ff9800;
        margin-right: 16rpx;
      }
      
      text {
        font-size: 26rpx;
        color: #666;
      }
    }
  }

  /* 表单区域 */
  .form-section {
    margin-bottom: 60rpx;
    
    .form-card {
      background: white;
      border-radius: 30rpx;
      padding: 40rpx 30rpx;
      box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
      
      :deep(.uni-forms-item) {
        margin-bottom: 40rpx;
        
        &:last-child {
          margin-bottom: 0;
        }
        
        .uni-forms-item__label {
          font-size: 28rpx;
          color: #333;
          font-weight: 500;
        }
        
        .uni-easyinput {
          .uni-easyinput__content {
            background: #f8f9fa;
            border-radius: 16rpx;
            border: none;
            height: 88rpx;
            padding: 0 30rpx;
            
            .uni-input-input {
              font-size: 30rpx;
              color: #333;
            }
          }
        }
      }
    }
  }

  /* 密码强度指示器 */
  .password-strength {
    margin-top: 20rpx;
    display: flex;
    align-items: center;
    
    .strength-bar {
      flex: 1;
      height: 8rpx;
      background: #f0f0f0;
      border-radius: 4rpx;
      overflow: hidden;
      margin-right: 20rpx;
      
      .strength-fill {
        height: 100%;
        transition: all 0.3s ease;
        border-radius: 4rpx;
        
        &.weak {
          background: #ff4757;
        }
        
        &.medium {
          background: #ffa726;
        }
        
        &.strong {
          background: #66bb6a;
        }
      }
    }
    
    .strength-text {
      font-size: 24rpx;
      font-weight: 500;
      min-width: 40rpx;
      
      .weak {
        color: #ff4757;
      }
      
      .medium {
        color: #ffa726;
      }
      
      .strong {
        color: #66bb6a;
      }
    }
  }

  /* 操作按钮 */
  .action-section {
    .submit-btn {
      width: 100%;
      height: 88rpx;
      background: linear-gradient(135deg, #667eea, #764ba2);
      border-radius: 44rpx;
      border: none;
      font-size: 32rpx;
      font-weight: 500;
      margin-bottom: 30rpx;
      box-shadow: 0 4rpx 20rpx rgba(102, 126, 234, 0.3);
      
      &[disabled] {
        opacity: 0.6;
      }
      
      .btn-content {
        display: flex;
        align-items: center;
        justify-content: center;
        
        .iconfont {
          font-size: 32rpx;
          margin-right: 10rpx;
        }
      }
      
      .loading-content {
        display: flex;
        align-items: center;
        justify-content: center;
        
        .loading {
          width: 32rpx;
          height: 32rpx;
          border: 2rpx solid rgba(255, 255, 255, 0.3);
          border-top: 2rpx solid white;
          border-radius: 50%;
          animation: spin 1s linear infinite;
          margin-right: 10rpx;
        }
        
        @keyframes spin {
          0% { transform: rotate(0deg); }
          100% { transform: rotate(360deg); }
        }
      }
    }
    
    .cancel-btn {
      width: 100%;
      height: 88rpx;
      background: white;
      color: #666;
      border: 1rpx solid #e0e0e0;
      border-radius: 44rpx;
      font-size: 32rpx;
    }
  }
</style>
